<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Force-Directed Graph</title>
  <script src="../../build/deps.js"></script>
  <!-- force -->
  <script src="../../deps/seajs/sea.js"></script>
  <script>
    var dir = location.href.replace(/\\/g,'/').replace(/\/[^\/]*$/, '');
    seajs.config({
      alias: {
        'DataV': dir + '/../../lib/datav.js',
        'Force': dir + '/../../lib/charts/force.js'
      }
    });
  </script>
<style type="text/css">
#chart {
    border-top: 1px dashed #F00;
    border-bottom: 1px dashed #F00;
    padding-left: 20px;
}
.textArea {
    border: 2px solid black;
    color: black;
    font-family: monospace;
    height: 3in;
    overflow: auto;
    padding: 0.5em;
    width: 750px;
}
</style>
</head>

<body>
  <div class="body">
    <h1 id="forcedirected_graph">Force-Directed Graph</h1>
    <div class="gallery" id="chart"></div>
  </div>
  <script>
    seajs.use(["Force", "DataV"], function (Force, DataV) {
      // DataV.changeTheme("datav");
      var net = new Force("chart", {
        width: 800,
        height: 600,
        tag: true
      });
      DataV.csv("DataExample.csv", function (source) {
        net.setSource(source, {id: 0, name: 1, nValue: 2, source: 3, target: 4, lValue: 5});
        net.render();
      });
    });
  </script>
</body>
</html>
